Skip to content

Allow opening menu by swiping from only far left/right#117

Open
swelther wants to merge 4 commits intoMango:masterfrom
swelther:edge_slide
Open

Allow opening menu by swiping from only far left/right#117
swelther wants to merge 4 commits intoMango:masterfrom
swelther:edge_slide

Conversation

@swelther
Copy link
Copy Markdown

I had issues with the swipe slideout when there is a horizontal scrolling div, see issue #58 and issue #59.

This PR is based on PR #10 which has been closed and is no longer available.

It works for me. Any enhancements or ideas are welcome.

Would like to see this been merged :)

@swelther swelther changed the title Edge slide Allow opening menu by swiping from only far left/right Aug 20, 2015
@tbleckert
Copy link
Copy Markdown

This would be very useful! +1

@garygreen
Copy link
Copy Markdown

@pazguille any news on this? I'm currently maintaining a separate fork just to have this kind of feature, bit a pain tbh.

As I reported in issue #59 it will be good to have some form of dragWidth which only allows opening the menu within the given width from the left / right side of the screen. This is critical when you have horizontal scrolling things like carousels, or overflow stuff on the page. At the moment its causing the menu to open when scrolling.

I know you can can get around this by using the beforeOpen events and detect whether to open or not based on the currentTarget etc, but that's a real pain and much harder than it needs to be.

@mauron85
Copy link
Copy Markdown

+1

4 similar comments
@migburillo
Copy link
Copy Markdown

+1

@jamalx31
Copy link
Copy Markdown

+1

@cdeeter
Copy link
Copy Markdown

cdeeter commented Nov 16, 2016

+1

@stefenphelps
Copy link
Copy Markdown

+1

@Sandidro
Copy link
Copy Markdown

+1 + 1 +1

@Jarzon
Copy link
Copy Markdown

Jarzon commented Nov 18, 2017

I needed that feature to mimic native mobile apps menu.

Since I didn't want to maintain a fork I used the following code to update slideout._preventOpen. I reused _tolerance for the size of the padding, since it was so tiny.

let panel = document.getElementById('panel');

let slideout = new Slideout({
    'panel': panel,
    'menu': document.getElementById('sideMenu'),
    'padding': 256,
    'tolerance': 50
});

panel.addEventListener('touchstart', function(eve) {
    let offset = eve.touches[0].pageX;

    if (slideout._orientation !== 1) {
        offset = window.innerWidth - offset;
    }

    slideout._preventOpen = slideout._preventOpen || (offset > slideout._tolerance && !slideout.isOpen());
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

10 participants